<template>
  <section v-loading="loading">
    <el-button size="mini" type="primary" @click="addBtn">添加</el-button>
    <el-table :data="giftDefineList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="类型" prop="modelType">
        <template slot-scope="scope">
          {{modelTypeList.find(type=>type.val === scope.row.modelType).name}}
        </template>
      </el-table-column>
      <el-table-column label="计算类型" prop="computeType">
        <template slot-scope="scope">
          {{computeTypeList.find(type=>type.val === scope.row.computeType).name}}
        </template>
      </el-table-column>
      <el-table-column label="内容类型" prop="contentType">
        <template slot-scope="scope">
          <sel-content-type :item="scope.row" :type="false"></sel-content-type>
        </template>
      </el-table-column>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="setGiftBtn(scope.row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="completed">
        <template slot-scope="scope">
          <span v-if="scope.row.completed" style="color: green">使用中</span>
          <span v-else  style="color: orangered">编辑中</span>
          <el-button size="mini" type="text" @click="successBtn(scope.row)" v-if="!scope.row.completed">点击完成</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
          <el-button size="mini" type="success" @click="successBtn(scope.row)" v-if="!scope.row.completed">完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDialog" v-if="editDialog" :title="currGiftDefine.id?'编辑':'新建'">
      <new-gift-define :giftDefine="currGiftDefine" v-on:confirm="confirmBtn"></new-gift-define>
    </el-dialog>
    <el-dialog :visible.sync="setGiftDialog" v-if="setGiftDialog" title="设置">
      <gift-detail :id="currGiftDefine.id" v-on:confirm="confirmBtn"></gift-detail>
    </el-dialog>
  </section>
</template>

<script>
  import giftDetail from '../giftDetail/giftDetail'
  import selContentType from '@/components/app/appAd/selContentType'
  import newGiftDefine from './newGiftDefine'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "giftDefineList",
    components:{newGiftDefine,selContentType,giftDetail},
    data(){
      return {
        loading:false,
        giftDefineList:null,
        totalPage:0,
        editDialog:false,
        currGiftDefine:null,
        computeTypeList:[
          {name:'系统',code:'system',val:1},
          {name:'营销',code:'marketing',val:2},
          {name:'用户',code:'member',val:3},
        ],
        modelTypeList:[
          {name:'分享',code:'share',val:1},
          {name:'广告',code:'ad',val:2}
        ],
        setGiftDialog:false
      }
    },
    created(){
      this.getGiftDefineList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addBtn(){
        this.currGiftDefine={title:'',contentType:null,contentValue:null,modelType:null,computeType:null,data:{}}
        this.editDialog=true
      },
      successBtn(row){
        console.log('完成这个定义----')
        this.$confirm('完成定义后将无法修改，请确认：')
          .then(()=> {
            this.fetch({name:"completedGiftDefine",data:{id:row.id}})
              .then(res=>{
                console.log('完成定义-----',res)
                this.$message({type:'success',message:'完成！'})
                this.getGiftDefineList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消！'
            })
            this.loading = false
          })
      },
      editBtn(row){
        this.currGiftDefine=row
        this.editDialog=true
      },
      delBtn(row){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delGiftDefine",data:{id:row.id}})
              .then(res=>{
                this.loading=false
                this.$message({type:'success',message:'删除成功！'})
                this.getGiftDefineList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      goPage(val){
        this.getGiftDefineList(val-1)
      },
      getGiftDefineList(pageNo){
        // return
        this.fetch({name:"getGiftDefineList",data:{page:pageNo?pageNo:0}})
          .then(res=>{
            console.log('获取giftdefine列表----',res)
            console.table(res)
            this.giftDefineList=res.content
            this.totalPage=res.totalPages
            this.editDialog=false
            this.setGiftDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmBtn(e){
        let tmp={...e}
        if(tmp.start){
          tmp.start=''+dateFormater.formatDatetime(e.start)
          tmp.end=''+dateFormater.formatDatetime(e.end)
        }
        if(e.id){
          this.updateGiftDefine(tmp)
        }else {
          this.createGiftDefine(tmp)
        }
      },
      updateGiftDefine(data){
        this.fetch({name:"updateGiftDefine",data})
          .then(res=>{
            console.log('update----',res)
            this.getGiftDefineList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createGiftDefine(data){
        this.fetch({name:"createGiftDefine",data})
          .then(res=>{
            console.log('create----',res)
            this.getGiftDefineList()
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setGiftBtn(row){
        this.currGiftDefine=row
        this.setGiftDialog=true
      }
    }
  }
</script>

<style scoped>

</style>
